<template>
	<view class="notice-page">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<view class="notice-list">
				<view class="notice-item" v-for="(item, index) in dataList" :key="index" @click="getNoticeDetail(item)">
					<image :src="item.image" class="item-left"></image>
					<view class="item-right">
						<view class="notice-title">
							<view class="title">{{ item.title }}</view>
						</view>
						<view class="notice-tag">{{ item.create_time_text }}</view>
					</view>
				</view>
			</view>
		</z-paging>
		<u-popup :show="showNotice" mode="center" round="16" @close="showNotice = false" :safeAreaInsetBottom="false"
			:closeOnClickOverlay="true">
			<view class="popupNotice" v-if="noticeDetail">
				<image src="../../static/common/icon_tz.png" class="notice-icon"></image>
				<view class="title">{{ noticeDetail.title }}</view>
				<scroll-view scroll-y="true" class="content">
					<view class="notice" v-html="noticeDetail.desc"></view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				showNotice: false,
				noticeDetail: null,
			}
		},
		onShow() {
			this.refreshList()
		},
		methods: {
			getNoticeDetail(item) {
				this.$Api.common.getNoticeDetail({
					id: item.id
				}).then(res => {
					this.showNotice = true
					this.noticeDetail = res.data
				})
			},
			refreshList() {
				if (this.$refs.paging) {
					this.$refs.paging.scrollToTop()
					this.$refs.paging.refresh();
				}
			},
			queryList(pageNo, pageSize) {
				this.$Api.common.getNoticeList({
					page: pageNo,
					limit: pageSize,
				}).then(res => {
					this.$refs.paging.complete(res.data);
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.notice-page {
		width: 100%;
		min-height: 100vh;
		background-color: #f5f6fa;

		.popupNotice {
			width: 662rpx;
			box-sizing: border-box;
			padding: 32rpx 32rpx 48rpx;
			background: linear-gradient(180deg, #CFE1FF 0%, #FFFFFF 30%);
			border-radius: 32rpx;
			border: 2rpx solid #707070;
			position: relative;

			.notice-icon {
				position: absolute;
				width: 196rpx;
				height: 196rpx;
				top: -64rpx;
				right: 0rpx;
			}

			.title {
				text-align: center;
				font-weight: bold;
				font-size: 32rpx;
				width: 300rpx;
				margin: 0 auto;
			}

			.content {
				height: 520rpx;
				margin-top: 32rpx;
				line-height: 44rpx;
				font-size: 26rpx;
			}
		}


		.notice-list {
			padding: 20rpx;

			.notice-item {
        margin-bottom: 20rpx;
				padding: 20rpx;
				display: flex;
				align-items: center;
				background-color: #ffffff;
				border-radius: 20rpx;

				.item-left {
					width: 120rpx;
					height: 120rpx;
					border-radius: 16rpx;
					margin-right: 24rpx;
				}

				.item-right {
					flex: 1;

					.notice-title {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.title {
							width: 400rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;

						}
					}

					.notice-tag {
						margin-top: 14rpx;
						width: max-content;
						padding: 2rpx 20rpx;
						background: #e5eefe;
						border-radius: 22rpx;
						font-size: 24rpx;
						color: #2777FF;
					}
				}
			}
		}
	}
</style>